<template>
    <div>
        <el-row style="margin-top: 20px;">
            <el-col>
                <template>
                    <el-table :data="page.list" style="width: 100%">
                        <el-table-column prop="entranceImg" label="车位购买证明" width="180">
                            <template slot-scope="scope">
                                <el-image :src="scope.row.stallBuyProve" :preview-src="scope.row.stallBuyProve"
                                    style="width: 100px; height: 100px">
                                    <div slot="placeholder" class="image-slot">
                                        加载中<span class="dot">...</span>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="certifiedInfoId" label="物业名称" width="120">
                            <template slot-scope="scope">
                                <span v-if="pages[scope.row.certifiedInfoId]">{{
                                    pages[scope.row.certifiedInfoId].certifiedInfoName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stallCheckNote" label="备注" width="120">
                        </el-table-column>
                        <el-table-column prop="stallInfoNum" label="车位号" width="120">
                        </el-table-column>
                        <el-table-column prop="stallCheckState" label="物业审核状态" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.stallCheckState === 7">待审核</span>
                                <span v-else-if="scope.row.stallCheckState === 4">通过</span>
                                <span v-else-if="scope.row.stallCheckState === 5">拒绝</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="stallInfoId" label="车位上下架状态" width="150">
                            <template slot-scope="scope">
                                <span v-if="num[scope.row.stallInfoId]">
                                    <span v-if="num[scope.row.stallInfoId].stallUpDownState === 1">车位正在被使用</span>
                                    <span v-else-if="num[scope.row.stallInfoId].stallUpDownState === 0">车位空闲中</span>
                                    <span v-else-if="num[scope.row.stallInfoId].stallUpDownState === 2">车位上架中</span>
                                    <span v-else-if="num[scope.row.stallInfoId].stallUpDownState === 3">车位下架中</span>
                                    <span v-else-if="num[scope.row.stallInfoId].stallUpDownState === 4">车位审核成功</span>
                                    <span v-else-if="num[scope.row.stallInfoId].stallUpDownState === 5">车位审核失败</span>
                                    <span v-else-if="num[scope.row.stallInfoId].stallUpDownState === 7">车位等待审核</span>
                                </span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="address" fixed="right" label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="upload(scope.row)">上架</el-button>
                                <el-button type="danger" @click="down(scope.row)">下架</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-col>
        </el-row>


         <!-- 车位上架对话框 -->
        <el-dialog title="车位上架详情" :visible.sync="dialogVisible4" width="30%" :before-close="handleClose">
            <div>每日出租时间段设置：</div>
            <div>
                <span style="margin-top: 20px;">开始时间：</span>
                <el-time-picker arrow-control v-model="CerUpStallByIdForm.startTime" :picker-options="{
                }" placeholder="任意时间点" style="margin-top: 20px;" value-format="HH:mm" format="HH:mm">
                </el-time-picker>
            </div>
            <div>
                <span style="margin-top: 20px;">结束时间：</span>
                <el-time-picker arrow-control v-model="CerUpStallByIdForm.endTime" :picker-options="{
                }" placeholder="任意时间点" style="margin-top: 20px;" value-format="HH:mm" format="HH:mm">
                </el-time-picker>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="cerDownStallById">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 分页按钮 -->
        <el-row>
            <el-col :span="24">
                <el-pagination background layout="total, prev, pager, next" :page-size="page.size" :total="page.total"
                    @current-change="changePageNum">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import router from '../router';

export default {
    name: "RentersCarinfo",
    data() {
        return {
            logoUrl: "../../static/images/system/woniu.png",
            page: {},
            certifiedInfoIds: [],
            pages: {},
            dialogVisible4: false,
            stallUpDownState: null,
            num: {},
            CerUpStallByIdForm: {
                stallInfoId: null,
                startTime: "",
                endTime: ""
            },
        };
    },
    methods: {
        cerDownStallById(){
            if (this.CerUpStallByIdForm.startTime == "" || this.cerDownStallById.endTime == "") {
                this.$message({
                    type: 'warning',
                    message: "请选择时间段"
                })
            } else {
                this.$http.post("/stall/stallInfo/upStallById", this.CerUpStallByIdForm).then(resp => {
                    console.log(resp)
                    if (resp.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: resp.data.message
                        })
                        this.cancel()
                        this.LoadALLplatforms()
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.data.message
                        })
                    }
                })
            }
        },
        upload(row) {
            this.CerUpStallByIdForm.stallInfoId = row.stallInfoId
            this.dialogVisible4 = true
        },
        down(row) {
            this.$http.get("/stall/stallInfo/downStallById", {
                params: {
                    stallInfoId: row.stallInfoId
                }
            }).then(resp => {
                console.log(resp)
                if (resp.data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: resp.data.message
                    })
                    this.cancel()
                    this.LoadALLplatforms()
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.data.message
                    })
                }
            })
        },
        cancel() {
            this.CerUpStallByIdForm.startTime = ""
            this.CerUpStallByIdForm.endTime = ""
            this.dialogVisible4 = false   
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        loadcarportstatebyid(stallInfoId) {
            this.$http.get("/stall/stallInfo/loadcarportstatebyid", {
                params: {
                    stallInfoId: stallInfoId
                }
            }).then(resp => {
                this.$set(this.num, stallInfoId, resp.data.data);
            });
        },
        findCertifiedById(certifiedInfoId) {
            this.$http.get("/certified/certifiedInfo/findCertifiedById", {
                params: {
                    certifiedInfoId: certifiedInfoId
                }
            }).then(resp => {
                this.$set(this.pages, certifiedInfoId, resp.data.data);
            });
        },
        changePageNum(pageNum) {
            this.pageNum = pageNum;
            this.LoadALLplatforms();
        },
        LoadALLplatforms() {
            if (!this.pageNum) {
                this.pageNum = 1;
            }
            if (!this.pageSize) {
                this.pageSize = 6;
            }
            this.$http.get("/stall/stallInfo/loadAllstalls", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
            }).then(resp => {
                this.page = resp.data.data;

                this.page.list.forEach(row => {
                    this.findCertifiedById(row.certifiedInfoId);
                });

                this.page.list.forEach(row => {
                    this.loadcarportstatebyid(row.stallInfoId);
                });


            });
        }
    },
    created() {
        this.LoadALLplatforms();
    },

    components: { router }
}
</script>

<style scoped>
html,
body {
    height: 100%;
}
</style>